<template>
	<view class="daily-container">
		<view class="daily-img" v-if="isLoading">
			<u-popup class="coupon-popup pore" v-if="isLoading" :show="isLoading" mode="center"
				:customStyle="{'width':'354px','position':'relative'}" round="20" bgColor="transparent">
				<view class="coupon-wrap">
					<image class="loading-img" src="https://hxs.dsjhs.com:553/prod-api/profile/wuxing-loading.png"
						mode="" style="width: 162px;height: 162px;"></image>
				</view>

			</u-popup>
		</view>

		<view class="daily-content-wrap">
			<view class="daily-content">
				<view class="title"></view>
				<view class="sub-title">在犹豫不敢向前、怀疑此行顺利与否，或者心血来潮的时刻…</view>
				<view class="main-img">
					<view class="main-img-text">
						<view>静默一分钟，</view>
						<view>心念集中于你所问之事，然后发问</view>
					</view>
				</view>
			</view>
			<view class="submit-btn-wrap">
				<button class="submit-btn" v-if="detailData.distance === 0"
					@tap="handleSubmit">{{ detailData.isFirst ? '发问' : '一事一问，不可复问' }}</button>

				<button class="submit-btn disabled" v-if="detailData.distance > 0" style="display: flex;justify-content: center;">
					<text>平复心绪</text><uni-countdown  :show-day="false" @timeup="countDownTimeup"
						:hour="detailData.countDown[0]" :minute="detailData.countDown[1]"
						:second="detailData.countDown[2]"></uni-countdown> <text>后再来</text>
				</button>

				<!-- <u-button class="submit-btn" shape="circle" v-if="isEndCountDown" open-type="share" color="#FFDE6D"
					:customStyle="{'color':'#34314F', 'fontWeight': 600}">
					邀请好友助力，即可再次发问
				</u-button> -->


				<view class="tip">每日赠送一次发问，后续发问需等2小时。</view>
			</view>
			<view class="daily-footer">
				<view class="total">
					目前已发问<text class="count">{{ detailData.number }}</text>次
				</view>
				<view class="footer-tip">
					推算理论源于小六壬，仅供国学探究，娱乐使用！
				</view>
			</view>
		</view>

		<!-- 结果弹窗 -->
		<resultlayer :showDialog="showResLayer" :result="resultData" @closeLayer="showResLayer = false"></resultlayer>
	</view>
</template>


<script>
	import resultlayer from './resultlayer.vue'
	import {
		getXiaoliuren,
		fortuneTelling
	} from '@/common/api_dailyinquiry.js'

	export default {
		components: {
			resultlayer
		},
		data() {
			return {
				showResLayer: false,
				showHelpDialog: false,
				isEndCountDown: false,
				isLoading: false,
				resultData: {},
				detailData: {},
				userData: {}
			}
		},
		onShareAppMessage(res) {
			console.log(res, 'onShareAppMessage')
			let path = '',
				title = '心有所想，即来发问'
			if (res.from === 'menu') {
				path = '/subpage/dailyinquiry/index'
			} else {
				title = '心有所想，即来发问,帮我助力'
				path = `/subpage/dailyinquiry/help?id=${this.userData.id}&userName=${this.userData.userName}`
			}
			return {
				title: title,
				path: path,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onLoad(option) {
			console.log(option, 'index option====')

		},
		created() {
			this.userData = uni.getStorageSync('userInfo')
			this.getBaseInfo()
		},

		methods: {
			async getBaseInfo() {
				const res = await getXiaoliuren()
				if (res.code === 200) {
					this.detailData = res.data
					this.detailData.countDown = this.secondsToHms(res.data.distance)
				}
			},
			async handleSubmit() {
				this.isLoading = true
				setTimeout(async () => {
					const data = await fortuneTelling()
					if (data.code === 200) {
						if (data.data.value) {
							this.showResLayer = true
							this.resultData = data.data
							this.getBaseInfo()
						} else {
							this.showResLayer = false
						}
						this.isLoading = false
					}
				}, 1500)
			},
			secondsToHms(seconds) {
				var hours = Math.floor(seconds / 3600);
				var minutes = Math.floor((seconds % 3600) / 60);
				var secs = seconds % 60;

				return [hours, minutes, secs]
				// return [0, 0, 3]
			},
			countDownTimeup() {
				console.log('countDownTimeup')
				this.isEndCountDown = true
				this.getBaseInfo()
			},
			closeHelpLayer() {
				console.log('closeHelpLayer')
				this.showHelpDialog = false
			}
		}
	}
</script>

<style lang="scss">
	.daily-container {
		position: relative;
		width: 100%;
		min-height: 100vh;

		background-color: #FAF5FF;
		box-sizing: border-box;

		.daily-img {
			// position: absolute;
			// top: 40%;
			// left: 50%;
			// transform: translate3d(-50%, -50%, 0);
			// display: flex;
			// align-items: center;
			// justify-content: center;
			width: 100%;
			// min-height: 100vh;
			// z-index: 999;

			// &::after {
			// 	position: absolute;
			// 	width: 100%;
			// 	min-height: 120vh;
			// 	background-color: rgba(0, 0, 0, 0.4);
			// 	content: '';
			// 	z-index: 999;
			// }

			.coupon-wrap {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 442rpx;
				height: 462rpx;
				margin: 0 auto;
				// padding: 52rpx 0 28rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/jgtc.png') no-repeat center center;
				background-size: 100% 100%;
				box-sizing: border-box;

			}

			.loading-img {
				position: relative;
				width: 162px;
				height: 162px;
				animation: rotate 3s linear infinite;
				z-index: 9999;
			}
		}

		.daily-content {
			padding-top: 94rpx;

			.title {
				width: 428rpx;
				height: 46rpx;
				margin: 0 auto 12rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/bt.png') no-repeat center;
				background-size: 100% 100%;
			}

			.sub-title {
				font-size: 26rpx;
				color: #34314F;
				line-height: 56rpx;
				text-align: center;
			}

			.main-img {
				position: relative;
				width: 358px;
				height: 390px;
				margin: 80rpx auto 48rpx;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/syt.png') no-repeat center;
				background-size: 100% 100%;

				.main-img-text {
					position: absolute;
					bottom: 36rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 420rpx;
					margin: 0 auto;

					view {
						font-weight: 600;
						font-size: 28rpx;
						color: #34314F;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}

		}

		.submit-btn-wrap {
			// margin: 0 auto 4rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			.submit-btn {
				height: 96rpx;
				background: #FFDE6D;
				border-radius: 20px;
				font-weight: 600;
				font-size: 32rpx;
				line-height: 96rpx;
				color: #34314F;

				&::after {
					border: 0;
				}

				&.disabled {
					background: rgba(52, 49, 79, 0.06);
				}
			}

			.tip {
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(52, 49, 79, 0.4);
				line-height: 56rpx;
				text-align: center;
			}
		}

		.daily-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 172rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/jx.png') no-repeat center;
			background-size: 100% 100%;

			.total {
				font-weight: 400;
				font-size: 32rpx;
				color: #A694EA;
				line-height: 44rpx;
				text-align: center;

				.count {
					margin: 0 8rpx;
					font-weight: 600;
				}
			}

			.footer-tip {
				font-weight: 400;
				font-size: 26rpx;
				color: #A694EA;
				line-height: 56rpx;
				text-align: center;
			}
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.uni-countdown {
		text {
			font-size: 32rpx;
		}
	}

	//单行
	.s_1 {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的部分 */
		max-width: 200px;
		/* 设置最大宽度以限制文本的显示长度 */
	}


	//多行
	.s_2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>